<template>
  <div class="doctor_log">
    <el-form v-loading="loading" :model="loginForm">
      <el-form-item >
        <span class="s1">医生账户</span>
        <input class="input_box"  v-model="loginForm.username"/>
      </el-form-item>

      <el-form-item >
        <span class="s2">密码</span>
        <input  class="input_box" type="password" v-model="loginForm.password"/>
      </el-form-item>

      <el-form-item>
        <span class="s3">
      <el-checkbox v-model="checked" name="a">记住密码</el-checkbox>
        </span>
      </el-form-item>
    </el-form>

    <span class="s4" @click="goForget">忘记密码？</span>
    <span class="login_sp" type="primary" @click="doctorLogin">登录</span>
    <div class="last">
      <span>没有账号？</span>
      <span style="color: #1362FC" @click="goRegister">注册</span>
    </div>
  </div>
</template>

<script>
import {request} from "../api/request";
import Qs from 'qs'

export default {
  name: "DoctorLogin",
  data() {
    return {
      loading: false,
      checked: false,
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    goRegister() {
      event.stopPropagation();
      this.$router.push('/user/register');
    },
    goForget(){
      event.stopPropagation();
      this.$router.push('./forget');
    },
    doctorLogin() {
      if(this.loginForm.username === '') {
        this.$message.error('请填写账号');
        return false;
      }
      if(this.loginForm.password === '') {
          this.$message.error('请填写密码');
          return false;
      }
      this.loading = true;
      let that = this;
      request({
        url: 'user/doctor/login/',
        method: 'post',
        data: Qs.stringify({
          'username': that.loginForm.username,
          'password': that.loginForm.password
        })
      }).then(function (data) {
        data = data.data;
        if(data.code === 200) {
          that.$message.success(data.msg);
          that.$store.commit('updateDoctorInfo', data);
          window.localStorage.setItem('token', data.token);
          that.loading = false;
          that.$router.push('/index');
          // setTimeout(_ => {
          //
          // }, 400);
        } else {
          that.$message.error(data.msg);
          that.loading = false;
        }
      }).catch(function (err) {
        this.$message.error('系统繁忙，请重新登录');
      });
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.doctor_log {
  width: 100%;
  height: 100%;
  /*background-color: lavender;*/
}
span {
  cursor: default;
}

.s1 {
  display: block;
  text-align: left;
  /*background-color: lemonchiffon;*/
  margin-top: 10px;
  margin-bottom: 10px;
  color: #969BA0;
  font-weight: 600;
  font-size: 14px;
}
.s2 {
  display: block;
  text-align: left;
  /*background-color: lemonchiffon;*/
  margin-top: 20px;
  margin-bottom: 10px;
  color: #969BA0;
  font-weight: 600;
  font-size: 14px;
}
input {
  background:none;
  outline:none;
  border:none;
}
.input_box {
  width: 100%;
  display: block;
  /*height: 40px;*/
  height: 3.2rem;
  border-radius: 14px;
  border: 1px solid #F2F2F2;
  padding: 10px;
  color: #969BA0;
  font-weight: 400;
  transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}
.input_box:focus {
  border-color: #1362FC;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #1362FC;
  border-color: #1362FC;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1362FC;
}
/deep/.el-checkbox.is-bordered.is-checked{
  border-color: #1362FC;
}
div>.s3 {
  display: block;
  text-align: left;
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  /*background-color: lavenderblush;*/
}
.s4 {
  /*background-color: lemonchiffon;*/
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 14px;
  color: #969BA0;
}
.login_sp {
  display: block;
  letter-spacing: 2px;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: #1362FC;
  font-weight: 600;
  margin-top: 12px;
  border-radius: 16px;
}
.login_sp:hover {
  background-color: #034BD9;
  transition: .3s;
}
.last {
  /*background-color: lavender;*/
  padding-top: 10px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 13px;
  color: #969BA0;
}
</style>